<template>
  <div class="info back-page">
    <HeaderTop>
      <template #left>
        <van-icon
          name="arrow-left"
          @click="router.back()"
          size="20"
          style="transform: translateX(-0.3rem)"
        />
      </template>
      <template #center>
        <div class="fs-1 wd-75 center strong" style="color: white">账户信息</div>
      </template>
    </HeaderTop>
    <main class="pt-3">
      <van-cell-group>
        <van-cell center title="头像" is-link :to="{ name: 'UploadAvatar' }">
          <template #value>
            <van-image v-if="userinfo?.avatar" :src="imgpath" height="1.2rem" width="1.2rem" round>
            </van-image>
          </template>
        </van-cell>
        <van-cell title="用户名" is-link>
          <template #value>
            {{ userinfo?.username }}
          </template>
        </van-cell>
        <van-cell title="收货地址" is-link :to="{ name: 'EditAddress' }" />
      </van-cell-group>
      <p class="text-2 fs-6 my-2 ml-4">账号绑定</p>
      <van-cell title="手机" icon="phone-o" @click="editPhone" is-link />
      <p class="text-2 fs-6 my-2 ml-4">安全设置</p>
      <van-cell title="登录密码" value="修改" is-link :to="{ name: 'Forget' }" />
      <div class="pt-2">
        <van-button @click="logout" color="rgb(206, 87, 87)" block>退出登录</van-button>
      </div>
      <router-view v-slot="{ Component }">
        <transition name="detail-show">
            <component :is="Component" />
        </transition>
      </router-view>
    </main>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, computed } from "vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";
import { user } from "@/store/index";
import { storeToRefs } from "pinia";
import { getImgPath } from "@/uitls/path";
import { imgBaseUrl } from "dir/env.config";
const router = useRouter();
const store = user();
const { userinfo } = storeToRefs(store);
const imgpath = computed(() => {
  let path;
  if (userinfo.value.avatar.indexOf("/") !== -1) {
    path = imgBaseUrl + userinfo.value.avatar;
  } else {
    path = getImgPath(userinfo.value.avatar);
  }
  return path;
});
//手机绑定
const editPhone = ()=>{
  Toast.fail('请到手机app设置')
}
//退出登录
const logout = () => {
  store.logout();
  router.back();
};

</script>

<style lang="scss" scoped>
.info {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  overflow-x: hidden;
}
</style>
